<template>
  <view style="width: 100%">
    <view class="dp-product-itemlist">
      <view
        class="dp-product-item"
        v-for="(item, index) in data"
        :key="item.id"
      >
        <view
          class="item"
          @click="goto"
          :data-url="'/pages/shop/product?id=' + item[idfield]"
          :style="{ backgroundColor: probgcolor }"
        >
          <view
            :class="'topnumber' + index"
            class="topnumber"
            v-if="topnumber == 1 && index < 3"
          >
            TOP<br />{{ index + 1 }}
          </view>
          <view class="product-pic">
            <image class="image" :src="item.pic" mode="widthFix" />
            <image
              class="saleimg"
              :src="saleimg"
              v-if="saleimg != ''"
              mode="widthFix"
            />
          </view>
          <view class="product-info">
            <view class="p1" v-if="showname == 1">{{ item.name }}</view>
            <view
              class="p2"
              v-if="
                showprice != '0' &&
                (item.price_type != 1 || item.sell_price > 0)
              "
            >
              <view v-if="item.price_show_type == '0' || !item.price_show_type">
                <text class="t1" :style="{ color: t('color1') }">
                  <block v-if="item.usd_sellprice">
                    <text style="font-size: 24rpx">$</text
                    >{{ item.usd_sellprice }}
                    <text style="font-size: 28rpx"
                      ><text style="font-size: 24rpx; padding-right: 1px"
                        >￥</text
                      >{{ item.sell_price }}</text
                    >
                  </block>
                  <block v-else>
                    <text style="font-size: 24rpx; padding-right: 1px">￥</text
                    >{{ item.sell_price }}
                  </block>
                </text>
                <!-- 折扣会员价 -->
                <view
                  :style="{
                    color: t('color1'),
                    fontSize: '35rpx',
                    marginLeft: '10rpx',
                    display: 'flex',
                    alignItems: 'center',
                  }"
                  v-if="
                    item.discount_price_info && item.discount_price_info.name
                  "
                  ><view style="display: inline; font-size: 20rpx">{{
                    item.discount_price_info.name
                  }}</view>
                  ￥{{ item.discount_price_info.min_price }}</view
                >
              </view>
              <view
                v-if="
                  item.price_show_type == '1' || item.price_show_type == '2'
                "
              >
                <view v-if="item.is_vip == '0'">
                  <text class="t1" :style="{ color: t('color1') }">
                    <block v-if="item.usd_sellprice">
                      <text style="font-size: 24rpx">$</text
                      >{{ item.usd_sellprice }}
                      <text style="font-size: 28rpx"
                        ><text style="font-size: 20rpx; padding-right: 1px"
                          >￥</text
                        >
                        <text style="font-size: 32rpx">{{
                          item.sell_price
                        }}</text>
                      </text>
                    </block>
                    <block v-else>
                      <text style="font-size: 20rpx; padding-right: 1px"
                        >￥</text
                      >
                      <text style="font-style: 32rpx">{{
                        item.sell_price
                      }}</text>
                    </block>
                  </text>
                  <view
                    class="member flex"
                    v-if="item.price_show_type == '2' && item.lvprice == 1"
                  >
                    <view
                      class="member_module flex"
                      :style="'border-color:' + t('color1')"
                    >
                      <view
                        :style="{ background: t('color1') }"
                        class="member_lable flex-y-center"
                      >
                        {{ item.level_name }}</view
                      >
                      <view
                        :style="'color:' + t('color1')"
                        class="member_value"
                      >
                        ￥<text style="font-size: 26rpx">{{
                          item.sell_price_origin
                        }}</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view v-if="item.is_vip == '1'">
                  <view class="member flex">
                    <view
                      class="member_module flex"
                      :style="'border-color:' + t('color1')"
                    >
                      <view
                        :style="{ background: t('color1') }"
                        class="member_lable flex-y-center"
                      >
                        {{ item.level_name }}</view
                      >
                      <view
                        :style="'color:' + t('color1')"
                        class="member_value"
                      >
                        ￥<text style="font-size: 32rpx">{{
                          item.sell_price
                        }}</text>
                      </view>
                    </view>
                  </view>

                  <text class="t1" :style="{ color: t('color1') }">
                    <block v-if="item.usd_sellprice">
                      <text style="font-size: 24rpx">$</text
                      >{{ item.usd_sellprice }}
                      <text style="font-size: 30rpx"
                        ><text style="font-size: 20rpx; padding-right: 1px"
                          >￥</text
                        >
                        <text
                          :style="
                            item.lvprice == '1'
                              ? 'font-size:26rpx;'
                              : 'font-size:32rpx;'
                          "
                          >{{ item.sell_price_origin }}</text
                        >
                      </text>
                    </block>
                    <block v-else>
                      <text>
                        <text
                          style="font-size: 20rpx; padding-right: 1px"
                          v-if="item.sell_price_origin"
                          >￥</text
                        >

                        <text
                          :style="
                            item.lvprice == '1'
                              ? 'font-size:26rpx;'
                              : 'font-size:32rpx;'
                          "
                        >
                          {{ item.sell_price_origin }}</text
                        >
                      </text>
                    </block>
                  </text>
                </view>
              </view>

              <text
                class="t2"
                v-if="
                  showprice == '1' &&
                  0 &&
                  item.market_price * 1 > item.sell_price * 1
                "
                >￥{{ item.market_price }}</text
              >

              <text class="t3" v-if="item.juli">{{ item.juli }}</text>
            </view>

            <view class="p3">
              <view class="p3-1" v-if="showsales == '1' && item.sales > 0"
                ><text style="overflow: hidden"
                  >已售{{ item.sales }}件</text
                ></view
              >
            </view>
            <view
              class="nowbuy"
              :style="{ background: 'rgba(' + t('color2rgb') + ')' }"
            >
              立即抢购
            </view>
            <!--<view class="p4" :style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}" v-if="showcart==1 && !item.price_type" @click.stop="buydialogChange" :data-proid="item[idfield]"><text class="iconfont icon_gouwuche"></text></view>
				<view class="p4" :style="{background:'rgba('+t('color1rgb')+',0.1)',color:t('color1')}" v-if="showcart==2 && !item.price_type" @click.stop="buydialogChange" :data-proid="item[idfield]"><image :src="cartimg" class="img"/></text></view>-->
          </view>
        </view>
        <!-- 是否显示商家 距离 S-->
        <view
          class="binfo flex-bt"
          v-if="(showbname == '1' || showbdistance == '1') && item.binfo"
        >
          <view class="flex-y-center">
            <block v-if="showbname == '1'">
              <image :src="item.binfo.logo" class="t1" />
              <text class="t2">{{ item.binfo.name }}</text>
            </block>
          </view>
          <text class="t2" v-if="showbdistance == '1' && item.binfo.distance">{{
            item.binfo.distance
          }}</text>
        </view>
        <!-- 是否显示商家 距离 E-->
      </view>
    </view>
    <buydialog
      v-if="buydialogShow"
      :proid="proid"
      @buydialogChange="buydialogChange"
      :menuindex="menuindex"
    >
    </buydialog>
    <view class="posterDialog linkDialog" v-if="showLinkStatus">
      <view class="main">
        <view class="close" @tap="showLinkChange">
          <image class="img" src="/static/img/close.png" />
        </view>
        <view class="content">
          <view class="title">{{ lx_name }}</view>
          <view class="row" v-if="lx_bid > 0">
            <view class="f1">店铺名称</view>
            <view
              class="f2"
              @tap="goto"
              :data-url="'/pagesExt/business/index?id=' + lx_bid"
              >{{ lx_bname }}
              <image src="/static/img/arrowright.png" class="image" />
            </view>
          </view>
          <view class="row" v-if="lx_tel">
            <view class="f1">联系电话</view>
            <view
              class="f2"
              @tap="goto"
              :data-url="'tel::' + lx_tel"
              :style="{ color: t('color1') }"
              >{{ lx_tel }}
              <image
                :src="static_url + '/static/img/copy.png'"
                class="copyicon"
                @tap.stop="copy"
                :data-text="lx_tel"
              >
              </image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
var app = getApp();
export default {
  data() {
    return {
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      buydialogShow: false,
      showLinkStatus: false,
      proid: 0,
    };
  },
  props: {
    menuindex: { default: -1 },
    saleimg: { default: "" },
    showname: { default: 1 },
    namecolor: { default: "#333" },
    showprice: { default: "1" },
    showsales: { default: "1" },
    showcart: { default: "1" },
    cartimg: { default: "/static/imgsrc/cart.svg" },
    data: {},
    idfield: { default: "id" },
    probgcolor: { default: "#fff" },
    showcommission: {
      default: "0",
    },
    showbname: {
      default: "0",
    },
    showbdistance: {
      default: "0",
    },
    topnumber: {
      default: "0",
    },
  },
  methods: {
    buydialogChange: function (e) {
      if (!this.buydialogShow) {
        this.proid = e.currentTarget.dataset.proid;
      }
      this.buydialogShow = !this.buydialogShow;
    },
    showLinkChange: function (e) {
      var that = this;
      that.showLinkStatus = !that.showLinkStatus;
      that.lx_name = e.currentTarget.dataset.lx_name;
      that.lx_bid = e.currentTarget.dataset.lx_bid;
      that.lx_bname = e.currentTarget.dataset.lx_bname;
      that.lx_tel = e.currentTarget.dataset.lx_tel;
    },
  },
};
</script>
<style>
.dp-product-item {
  margin: 10rpx;
  width: 100%;
  border-bottom: 1rpx solid #f6f6f6;
}

.dp-product-itemlist {
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

.dp-product-itemlist .item {
  padding: 20rpx;
  width: 100%;
  display: inline-block;
  position: relative;
  background: #fff;
  display: flex;
  border-radius: 10rpx;
  align-items: center;
}

.dp-product-itemlist .product-pic {
  width: 30%;
  height: 0;
  overflow: hidden;
  background: #ffffff;
  padding-bottom: 30%;
  position: relative;
  border-radius: 4px;
}

.dp-product-itemlist .product-pic .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.dp-product-itemlist .product-pic .saleimg {
  position: absolute;
  width: 120rpx;
  height: auto;
  top: -6rpx;
  left: -6rpx;
}

.dp-product-itemlist .product-info {
  width: 70%;
  padding: 6rpx 10rpx 5rpx 20rpx;
  position: relative;
}

.dp-product-itemlist .product-info .p1 {
  color: #323232;
  font-weight: bold;
  font-size: 28rpx;
  line-height: 36rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 72rpx;
}

.dp-product-itemlist .product-info .p2 {
  margin-top: 60rpx;
  overflow: hidden;
  font-weight: bold;
}

.dp-product-itemlist .product-info .p2 .t1 {
  font-size: 36rpx;
}

.dp-product-itemlist .product-info .p2 .t2 {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #aaa;
  text-decoration: line-through;
  /*letter-spacing:-1px*/
}

.dp-product-itemlist .product-info .p2 .t3 {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #888;
}

.dp-product-itemlist .product-info .p3 {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 10rpx;
}

.dp-product-itemlist .product-info .p3-1 {
  font-size: 20rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: right;
  color: #999;
}

.dp-product-itemlist .product-info .p4 {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  position: absolute;
  display: relative;
  bottom: 6rpx;
  right: 4rpx;
  text-align: center;
}

.dp-product-itemlist .product-info .p4 .icon_gouwuche {
  font-size: 28rpx;
  height: 48rpx;
  line-height: 48rpx;
}

.dp-product-itemlist .product-info .p4 .img {
  width: 100%;
  height: 100%;
}

.dp-product-itemlist .binfo {
  padding-top: 6rpx;
  display: flex;
  align-items: center;
  min-width: 0;
}

.dp-product-itemlist .binfo .t1 {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
  flex-shrink: 0;
}

.dp-product-itemlist .binfo .t2 {
  color: #666;
  font-size: 26rpx;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-product-itemlist .couponitem {
  width: 100%;
  /* padding: 0 20rpx 20rpx 20rpx; */
  font-size: 24rpx;
  color: #333;
  display: flex;
  align-items: center;
}

.dp-product-itemlist .couponitem .f1 {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.dp-product-itemlist .couponitem .f1 .t {
  margin-right: 10rpx;
  border-radius: 3px;
  font-size: 22rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding-right: 10rpx;
  flex-shrink: 0;
  overflow: hidden;
}

.lianxi {
  color: #fff;
  border-radius: 50rpx 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 22rpx;
  padding: 0 14rpx;
  display: inline-block;
  float: right;
}

.member {
  padding: 5rpx 0;
}

.member_module {
  position: relative;
  border-radius: 8rpx;
  border: 1rpx solid #fd4a46;
  overflow: hidden;
  box-sizing: content-box;
}

.member_lable {
  height: 100%;
  font-size: 22rpx;
  color: #fff;
  background: #fd4a46;
  padding: 0 15rpx;
}

.member_value {
  padding: 0 15rpx;
  font-size: 20rpx;
  color: #fd4a46;
}

.nowbuy {
  background: rgba(235, 84, 77);
  color: #fff;
  text-align: center;
  padding: 6px 20rpx;
  width: 154rpx;
  border-radius: 38rpx;
  position: absolute;
  display: relative;
  bottom: 6rpx;
  right: 4rpx;
}

.topnumber {
  text-align: center;
  position: absolute;
  top: 0;
  z-index: 10;
  color: #fff;
  padding: 4rpx 6rpx;
}

.topnumber0 {
  background: #eb544d;
}

.topnumber1 {
  background: #e99d42;
}

.topnumber2 {
  background: #de868f;
}
</style>
